<template>
  <el-dialog
    title="客户信息"
    :visible.sync="centerDialogVisible"
    width="80%"
    center
    @open="init"
  >
    <div style="max-height: 600px;overflow-y: auto;padding: 0 20px">
      <el-form ref="form" v-loading="formLoading" :model="customer" :rules="rules" :disabled="true">
        <div class="title">客户基本信息</div>
        <table class="mailTable">
          <tr class="firstTr">
            <td class="column firstTd title_td">
              <span class="tip">*</span>项目名称
            </td>
            <td class="column">
              <el-form-item prop="name">
                <el-input v-model.trim="customer.name" placeholder="请输入项目名称"/>
              </el-form-item>
            </td>
            <td class="column title_td">
              <span class="tip">*</span>客户行业
            </td>
            <td class="column">
              <el-form-item prop="industry_id">
                <el-select v-model="customer.industry_id" placeholder="请选择行业">
                  <el-option
                    v-for="item in industry_dict"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </td>
            <td class="column firstTd title_td">
              <span class="tip">*</span>销售漏斗
            </td>
            <td class="column">
              <el-form-item prop="funnels">
                <el-select v-model="customer.funnels" multiple placeholder="请选择销售漏斗">
                  <el-option
                    v-for="item in funnel_dict"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="column title_td firstTd">
              <span class="tip">*</span>所属集团
            </td>
            <td class="column">
              <el-form-item prop="group">
                <el-select v-model="customer.group" clearable placeholder="请选择所属集团" filterable>
                  <el-option v-for="item in groupArr" :value="item.id" :key="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td class="column firstTd title_td">
              客户预算
            </td>
            <td class="column">
              <el-input v-model="customer.budget" placeholder="请输入线下全年总预算">
                <template slot="append">万</template>
              </el-input>
            </td>
            <td class="column title_td">
              <span class="tip">*</span>客户地址
            </td>
            <td class="column">
              <el-form-item prop="address">
                <el-input v-model.trim="customer.address" placeholder="请输入客户地址"/>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="column firstTd title_td">
              <span class="tip">*</span>维护人员
            </td>
            <td class="column">
              <el-form-item prop="maintenance_staff_id">
                <el-select v-model="customer.maintenance_staff_id" placeholder="请选择客户维护人员" style="width: 100%">
                  <el-option
                    v-for="item in user_list"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </td>
            <td class="column firstTd title_td">
              <span class="tip">*</span>客户负责人
            </td>
            <td class="column">
              <el-form-item prop="person_in_charge_id">
                <el-select v-model="customer.person_in_charge_id" placeholder="请选择客户负责人" style="width: 100%">
                  <el-option
                    v-for="item in user_list"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.status === 0"
                  />
                </el-select>
              </el-form-item>
            </td>
            <td class="column title_td">
              客户选择原因
            </td>
            <td class="column" colspan="2">
              <el-select v-model="customer.selection_reasons" multiple placeholder="请选择客户选择原因" style="width: 100%">
                <el-option
                  v-for="item in select_reason_dict"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </td>
          </tr>
          <tr>
            <td class="column firstTd title_td" colspan="2">
              客户投放背景分析（投放周期、投放习惯、投放金额等)
            </td>
            <td class="column textarea-box" colspan="4">
              <el-input
                v-model.trim="customer.company_launch_background"
                type="textarea"
                rows="4"
                placeholder="请输入内容"
              />
            </td>
          </tr>
          <tr>
            <td class="column firstTd title_td" colspan="2">
              结合公司客户维护方案，制定该客户维护标准
            </td>
            <td class="column textarea-box" colspan="4">
              <el-input
                v-model.trim="customer.company_programme"
                type="textarea"
                rows="4"
                placeholder="请输入内容"
              />
            </td>
          </tr>
        </table>
        <!--客户联系人信息-->
        <div class="title">联系人信息</div>
        <div class="table_data">
          <el-table v-loading="linkUserTableLoading" :data="linkUserData" border style="width: 100%;margin: 0 auto">
            <el-table-column type="index" label="序号" width="50" align="center">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="150" align="center"></el-table-column>
            <el-table-column prop="level" label="级别" width="150" align="center"></el-table-column>
            <el-table-column prop="dept" label="部门" width="150" align="center"></el-table-column>
            <el-table-column prop="post" label="职位" width="150" align="center"></el-table-column>
            <el-table-column prop="phone" label="联系电话" min-width="150" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-button-group>
                  <el-button size="small" :disabled="false" @click="showLinkUserEdit(scope.row,scope.$index,false)">查看
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--客户联系人信息-->
        <div class="title">入库信息</div>
        <div class="table_data">
          <el-table v-loading="putStorageTableLoading" :data="putStorageData" border style="width: 100%;margin: 0 auto">
            <el-table-column type="index" label="序号" width="50" align="center">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="company_head" label="抬头" width="200" align="center"></el-table-column>
            <el-table-column prop="website" label="网址" min-width="200" align="center"></el-table-column>
            <el-table-column prop="login_account" label="登录账号" width="150" align="center"></el-table-column>
            <el-table-column prop="password" label="密码" width="150" align="center"></el-table-column>
            <el-table-column prop="link_user" label="联系人" width="150" align="center"></el-table-column>
            <el-table-column prop="phone" label="联系电话" width="150" align="center"></el-table-column>
            <el-table-column prop="email" label="联系邮箱" min-width="150" align="center"></el-table-column>
          </el-table>
        </div>
        <div class="title">合作信息</div>
				<div class="table_data">
				  <el-table :data="customer.contractList || []" border style="width: 100%;margin: 0 auto">
				    <el-table-column type="index" label="序号" width="50" align="center">
				      <template slot-scope="scope">
				        <span>{{ scope.$index + 1 }}</span>
				      </template>
				    </el-table-column>
				    <el-table-column prop="month" label="合作年月" width="100" align="center"></el-table-column>
				    <el-table-column label="金额" width="300" align="center">
						<template slot-scope="scope">
						   {{scope.row.amount}} （{{scope.row.amountBig}}）
						</template>
					</el-table-column>
				    <el-table-column label="备注（合作资源明细或合作方案）" min-width="150" align="center">
							<template slot-scope="scope">
							  <div class="flex justify-center align-center flex-wrap">
								  <el-tag size="mini" v-for="item in scope.row.mediaCountList" style="margin: 0 3px 3px 0">
								    {{ item.name }}: {{item.num}}个
								  </el-tag>
									<el-tag size="mini" type="success" v-for="item in scope.row.proxyMediaCountList" style="margin: 0 3px 3px 0">
									  {{ item.name }}: {{item.num}}个
									</el-tag>
							  </div>
							</template>
						</el-table-column>
				  </el-table>
				</div>
        <!-- <table class="mailTable">
          <tr class="firstTr">
            <td class="column firstTd">
              合作年月
            </td>
            <td class="column">
              金额
            </td>
            <td class="column" colspan="2">
              备注（合作资源明细或合作方案）
            </td>
          </tr>
          <tr>
            <td colspan="6" class="column firstTd">
              无数据
            </td>
          </tr>
        </table> -->
        <div class="title">历史沟通记录</div>
      </el-form>
      <div class="table_data">
        <el-table v-loading="tableLoading" :data="oldTableData" border style="width: 100%">
          <el-table-column type="index" label="序号" width="50" align="center">
            <template slot-scope="scope">
              <span>{{ (listParams.page - 1) * listParams.page_size + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="follow_time" label="跟进时间" width="150" align="center"></el-table-column>
          <el-table-column prop="opposite_person" label="对接人" width="150" align="center"></el-table-column>
          <el-table-column label="达成成果" min-width="200" align="center">
            <template slot-scope="scope">
              {{ scope.row.achievements ? scope.row.achievements : '未填写' }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150px" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="lookFollow(scope.row)">查看详细信息</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="listParams.page"
          :page-sizes="[10, 20, 50, 100,200,500]"
          :page-size="listParams.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />

        <!--添加联系人弹出框-->
        <el-dialog :title="'查看联系人'" :visible.sync="linkUserDialogVisible" width="70%"
                   center @close="closeLinkUserDialog" append-to-body
        >
          <el-form ref="linkUserForm" :disabled="true" :model="linkUser">
            <table class="mailTable" style="width: 90%">
              <tr class="firstTr">
                <td class="column firstTd">
                  <span class="tip">*</span>名称
                </td>
                <td class="column">
                  <el-form-item prop="name">
                    <el-input v-model="linkUser.name" placeholder="请输入名称"></el-input>
                  </el-form-item>
                </td>
                <td class="column">
                  级别
                </td>
                <td class="column">
                  <el-select v-model="linkUser.level" placeholder="请选择级别">
                    <el-option value="总负责人"></el-option>
                    <el-option value="直接负责人"></el-option>
                    <el-option value="办事员"></el-option>
                  </el-select>
                </td>
                <td class="column">
                  <span class="tip">*</span>联系电话
                </td>
                <td class="column">
                  <el-form-item prop="phone">
                    <el-input v-model="linkUser.phone" placeholder="请输入联系电话"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr class="firstTr">
                <td class="column firstTd">
                  部门
                </td>
                <td class="column">
                  <el-input v-model="linkUser.dept" placeholder="请输入部门"></el-input>
                </td>
                <td class="column">
                  职务
                </td>
                <td class="column">
                  <el-input v-model="linkUser.post" placeholder="请输入职务"></el-input>
                </td>
                <td class="column">
                  生日
                </td>
                <td class="column">
                  <el-date-picker v-model="linkUser.birthday" type="date" style="width: 100%" placeholder="请选择日期"
                                  value-format="yyyy-MM-dd"
                                  format="yyyy 年 MM 月 dd 日"
                  ></el-date-picker>
                </td>
              </tr>
              <tr class="firstTr">
                <td class="column firstTd" colspan="2">
                  个人喜好
                </td>
                <td class="column textarea-box" colspan="4">
                  <el-input v-model="linkUser.hobbies" type="textarea" :rows="4" placeholder="请输入个人喜好"></el-input>
                </td>
              </tr>
              <tr class="firstTr">
                <td class="column firstTd" colspan="2">
                  家庭成员生日或重要纪念日
                </td>
                <td class="column textarea-box" colspan="4">
                  <el-input v-model="linkUser.commemoration_day" type="textarea" :rows="4" placeholder="请输入家庭成员生日或重要纪念日"
                  ></el-input>
                </td>
              </tr>
              <tr class="firstTr">
                <td class="column firstTd" colspan="2">
                  备注
                </td>
                <td class="column textarea-box" colspan="4">
                  <el-input v-model="linkUser.remark" type="textarea" :rows="4" placeholder="请输入备注"></el-input>
                </td>
              </tr>
            </table>
          </el-form>
          <span slot="footer" class="dialog-footer">
          <el-button @click="linkUserDialogVisible = false">关 闭</el-button>
        </span>
        </el-dialog>
        <!--跟进信息表单对话框-->
        <add-customer-follow-dialog ref="addCustomerFollowDialog" :customer-id="customerId"
                                    :follow-form-visible="followFormVisible" :model="tmp_follow"
                                    @close="followFormClose"
                                    :form-disabled="true"
                                    :fill-user-arr="linkUserData"
        ></add-customer-follow-dialog>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="centerDialogVisible = false">关 闭</el-button>
    </span>
  </el-dialog>

</template>

<script>
import { one as getCustomerInfo } from '@/api/customer/customer'
import { page as getFollowList } from '@/api/customer/customerFollow'
import addCustomerFollowDialog from '@/views/business/customer/components/AddCustomerFollowDialog'
import { list_all3rd_bycode } from '@/api/business/setting/dict'
import { get_company } from '@/api/system/department'
import { allList } from '@/api/system/user'

export default {
  name: 'CustomerDialog',
  props: {
    customerId: {
      type: Number,
      default: -1
    }
  },
  components: {
    addCustomerFollowDialog
  },
  data() {
    return {
      centerDialogVisible: false,
      user_list: [],
      sale_list: [],
      industry_dict: [], // 行业字典
      funnel_dict: [], // 销售漏斗字典
      select_reason_dict: [], // 选择原因字典
      customer: {
        id: null,
        name: null,
        address: null,
        brand: null,
        industry_id: null,
        budget: null,
        maintenance_staff_id: null,
        person_in_charge_id: null,
        // 总负责人信息
        person_in_charge_name: null,
        person_in_charge_phone: null,
        person_in_charge_dept: null,
        person_in_charge_post: null,
        // 直接负责人信息
        direct_responsible_person_name: null,
        direct_responsible_person_phone: null,
        direct_responsible_person_dept: null,
        direct_responsible_person_post: null,
        // 经办人信息
        clerk_name: null,
        clerk_phone: null,
        selection_reasons: [],
        funnels: [],
        company_structure_analysis: null,
        company_launch_background: null,
        company_information: null,
        company_programme: null,
        follows: [],
        whether_check: false,
        contact_modify: 0,
        put_storage_modify: 0,
        group: null
      },
      formLoading: false,
      listParams: {
        page: 1,
        page_size: 10,
        flow_id: null,
        customer_id: null
      },
      total: null,
      oldTableData: [],
      tableLoading: false,
      linkUserDialogVisible: false,
      // 联系人信息
      linkUser: {
        name: null,
        dept: null,
        post: null,
        phone: null,
        level: null,
        birthday: null,
        hobbies: null,
        commemoration_day: null,
        remark: null
      },
      putStorageData: [],
      putStorageTableLoading: false,
      linkUserData: [],
      linkUserTableLoading: false,
      groupArr: [],
      followFormVisible: false,
      tmp_follow: {
        action_list: [], // 推进动作数据集合
        resource_list: [], // 推荐资源集合
        customer_info_flow_id: null,
        follow_time: null,
        opposite_person: null,
        is_policy_decision: null,
        phone: null,
        remarks: null,
        communication_plan: null,
        achievements: null,
        analysis: null,
        reasons_for_recommendation: null,
        whether_remove: true,
        url_list: []
      }
    }
  },
  created() {
    this.initIndustryDict()
    this.initSelectReasonDict()
    this.initFunnelDict()
    this.initResourcesDict()
    this.initAdvancesDict()
    // this.getList()
    this.initCompany()
    this.initUserList()
    this.initGroupArr()
  },
  methods: {
    open() {
      this.centerDialogVisible = true
    },
    init() {
      this.formLoading = true
      getCustomerInfo({ id: this.customerId }).then(
        res => {
          this.customer = Object.assign({}, res.data)
          this.customer.put_storage_modify = 0
          this.customer.contact_modify = 0
          this.putStorageData = Object.assign([], res.data.putStorageList)
          this.linkUserData = Object.assign([], res.data.contactsList)
          this.customer.id = null
          this.customer.customer_id = res.data.id
          this.formLoading = false
          this.created = 0
        }
      ).catch(
        () => {
          this.formLoading = false
        }
      )
      this.getList()
    },
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    getList() {
      this.tableLoading = true
      this.listParams.customer_id = this.customerId
      // 获取用户历史跟进记录
      getFollowList(this.listParams).then(
        res => {
          this.oldTableData = res.data.records
          this.total = res.data.total
          this.tableLoading = false
        }
      ).catch(() => {
        this.tableLoading = false
      })
    },
    // 显示联系人编辑框
    showLinkUserEdit(row, index, flag) {
      this.flag = flag
      this.tmpIndex = index
      this.linkUserDialogVisible = true
      this.linkUserEdit = true
      this.linkUser = Object.assign({}, row)
      this.$nextTick(() => {
        this.$refs.linkUserForm.clearValidate()
      })
    },
    // 关闭联系人弹框
    closeLinkUserDialog() {
      this.linkUserEdit = false
      this.linkUser = {
        name: null,
        dept: null,
        post: null,
        phone: null,
        level: null,
        birthday: null,
        hobbies: null,
        commemoration_day: null,
        remark: null
      }
    },
    lookFollow(row) {
      this.tmp_follow = Object.assign({}, row)
      this.followFormVisible = true
    },
    followFormClose() {
      this.followFormVisible = false
      this.tmp_follow = {
        action_list: [], // 推进动作数据集合
        resource_list: [], // 推荐资源集合
        customer_info_flow_id: null,
        follow_time: null,
        opposite_person: null,
        is_policy_decision: null,
        phone: null,
        remarks: null,
        communication_plan: null,
        achievements: null,
        analysis: null,
        reasons_for_recommendation: null,
        whether_remove: true,
        url_list: []
      }
    },
    // 初始化行业字典
    initIndustryDict() {
      list_all3rd_bycode({ code: 'khxg-hy' }).then(
        res => {
          this.industry_dict = res.data.map(item => (
            {
              id: item.id,
              name: item.name
            }
          ))
        }
      )
    },
    // 初始化销售漏斗字典
    initFunnelDict() {
      list_all3rd_bycode({ code: 'khxg-xsld' }).then(
        res => {
          this.funnel_dict = res.data.map(
            item => (
              {
                id: item.id,
                name: item.name
              }
            )
          )
        }
      )
    },
    // 初始化选择原因字典
    initSelectReasonDict() {
      list_all3rd_bycode({ code: 'khxg-xzyy' }).then(
        res => {
          this.select_reason_dict = res.data.map(
            item => (
              {
                id: item.id,
                name: item.name
              }
            )
          )
        }
      )
    },
    // 初始化推荐资源字典
    initResourcesDict() {
      list_all3rd_bycode({ code: 'khxg-tjzy' }).then(
        res => {
          this.resources_dict = res.data.map(
            item => (
              {
                id: item.id,
                name: item.name
              }
            )
          )
        }
      )
    },
    // 初始化推进动作字典
    initAdvancesDict() {
      list_all3rd_bycode({ code: 'khxg-tjdz' }).then(
        res => {
          this.advances_dict = res.data.map(
            item => (
              {
                id: item.id,
                name: item.name
              }
            )
          )
        }
      )
    },
    /**
     * 初始化公司数据
     */
    initCompany() {
      get_company().then(
        res => {
          this.companyArr = res.data
        }
      )
    },
    /**
     * 初始化用户数据
     */
    initUserList() {
      allList().then(res => {
        this.user_list = res.data
      })
    },
    /**
     * 初始化所属集团数据
     */
    initGroupArr() {
      list_all3rd_bycode({ code: 'khxg-ssjt' }).then(res => {
        this.groupArr = res.data
      })
    }
  }
}
</script>

<style scoped>
.mailTable {
  width: 100%;
  font-size: 14px;
  margin: 0 auto 10px auto;
  border-collapse: collapse;
}

.mailTable tr td {
  width: 400px;
  height: 60px;
  line-height: 35px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  text-align: center;
  /*border: 1px solid #8c939d;*/
}

.header {
  padding-top: 20px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  margin: 10px auto;
}

.title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin: 10px auto;
}

.tip {
  color: red;
}

.textarea-box {
  padding: 10px !important;
}


/deep/ .el-form-item {
  margin-bottom: 0;
}

.error_box {
  margin-bottom: 22px;
}

.button_box {
  text-align: center;
  margin-top: -10px;
  padding-bottom: 10px;
}

/deep/ .el-dialog__title {
  font-size: 14px;
}

/deep/ .el-input.is-disabled .el-input__inner {
  background-color: white;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: white;
}

.table_data {
  width: 100%;
  margin: 0 auto;
}

.el-pagination {
  margin: 10px 0;
}

.custom-footer button {
  margin: 5px;
}

/deep/ .old_data {
  background-color: #f0f9eb;
}

/deep/ .new_data {
  background-color: oldlace;
}

.title_td {
  background: #F5F7FA;
  font-weight: bold;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: white;
  color: black;
}

/deep/ .el-input.is-disabled .el-input__inner {
  background-color: white;
  color: black;
}

</style>
